<template>
  <div class="login">
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
      <h3 class="title">{{ title }}</h3>
      <el-form-item prop="username">
        <el-input
          v-model="loginForm.username"
          type="text"
          auto-complete="off"
          placeholder="账号"
        >
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          type="password"
          auto-complete="off"
          placeholder="密码"
          @keyup.enter.native="handleLogin"
        >
          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-form-item prop="code" v-if="captchaEnabled">
        <el-input
          v-model="loginForm.code"
          auto-complete="off"
          placeholder="验证码"
          style="width: 63%"
          @keyup.enter.native="handleLogin"
        >
          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
        </el-input>
        <div class="login-code">
          <img :src="codeUrl" @click="getCode" class="login-code-img" />
        </div>
      </el-form-item>
      <!-- <el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px;">记住密码</el-checkbox> -->
      <el-form-item style="width: 100%;">
        <el-button
          :loading="loading"
          size="medium"
          type="primary"
          style="width: 100%;"
          @click.native.prevent="handleLogin"
        >
          <span v-if="!loading">登 录</span>
          <span v-else>登 录 中...</span>
        </el-button>
        <div style="float: right;" v-if="register">
          <router-link class="link-type" :to="'/register'">立即注册</router-link>
        </div>
      </el-form-item>
    </el-form>
    <!-- 底部 -->
    <!-- <div class="el-login-footer">
      <span>Copyright © 2018-2025 ruoyi.vip All Rights Reserved.</span>
    </div> -->
  </div>
</template>

<script>
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt';

export default {
    name: "Login",
    data() {
        return {
        title: process.env.VUE_APP_TITLE,
        codeUrl: "",
        loginForm: {
            username: "admin",
            password: "admin123",
            rememberMe: false,
            code: "",
            uuid: ""
        },
        loginRules: {
            username: [
            { required: true, trigger: "blur", message: "请输入您的账号" }
            ],
            password: [
            { required: true, trigger: "blur", message: "请输入您的密码" }
            ],
            code: [{ required: true, trigger: "change", message: "请输入验证码" }]
        },
        loading: false,
        // 验证码开关
        captchaEnabled: true,
        // 注册开关
        register: false,
        redirect: undefined
        };
    },
    watch: {
        $route: {
        handler: function(route) {
            this.redirect = route.query && route.query.redirect;
        },
        immediate: true
        }
    },
    mounted(){
        this.getCode();
        this.getCookie();
        this.createHearts();
    },
    methods: {
        getCode() {
        getCodeImg().then(res => {
            this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
            if (this.captchaEnabled) {
            this.codeUrl = "data:image/gif;base64," + res.img;
            this.loginForm.uuid = res.uuid;
            }
        });
        },
        getCookie() {
        const username = Cookies.get("username");
        const password = Cookies.get("password");
        const rememberMe = Cookies.get('rememberMe');
        this.loginForm = {
            username: username === undefined ? this.loginForm.username : username,
            password: password === undefined ? this.loginForm.password : decrypt(password),
            rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
        };
        },
        handleLogin() {
        this.$refs.loginForm.validate(valid => {
            if (valid) {
            this.loading = true;
            if (this.loginForm.rememberMe) {
                Cookies.set("username", this.loginForm.username, { expires: 30 });
                Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
                Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
            } else {
                Cookies.remove("username");
                Cookies.remove("password");
                Cookies.remove('rememberMe');
            }
            this.$store.dispatch("Login", this.loginForm).then(() => {
                this.$router.push({ path: this.redirect || "/" }).catch(() => {});
            }).catch(() => {
                this.loading = false;
                if (this.captchaEnabled) {
                this.getCode();
                }
            });
            }
        });
        },
        createHearts() {
            const loginContainer = document.querySelector('.login');
            for (let i = 0; i < 30; i++) {
                const heart = document.createElement('div');
                heart.classList.add('heart');
                
                // 随机位置
                heart.style.left = `${Math.random() * 100}vw`;
                heart.style.top = `${Math.random() * 100}vh`;
                
                // 随机大小 (15px 到 30px 之间)
                const size = 15+ Math.random() * 20;
                heart.style.width = `${size}px`;
                heart.style.height = `${size}px`;
                
                // 随机动画持续时间和延迟
                heart.style.animationDuration = `${5 + Math.random() * 5}s`;
                heart.style.animationDelay = `${Math.random() * 2}s`;
                
                loginContainer.appendChild(heart);
            }
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    padding: 0;
    //   background: linear-gradient(to bottom right, #ffecf8, #fdf1f8);
    background-image: url("../assets/images/bg.png");
    background-size: cover;
    overflow: hidden;
    position: relative;

    .heart {
        position: absolute;
        width: 20px;
        height: 20px;
        background-image: url("../assets/images/heart.png");
        background-size: contain;
        background-repeat: no-repeat;
        animation: floatingHeart 8s linear infinite;
        opacity: 0.7;
    }

    .login-form {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 15px;
        width: 500px;
        padding: 35px 35px 25px 35px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.58);
        z-index: 1;
        position: relative;
        overflow: hidden;
        border: 2px solid #ff9eb1;
        transition: all 0.3s ease;

        &:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        }

        .title {
        color: #ff5ca1;
        margin-bottom: 30px;
        text-align: center;
        font-size: 24px;
        font-weight: bold;
        }

        .el-form-item {
        margin-bottom: 20px;
        }

        .el-input {
        height: 40px;
        input {
            height: 40px;
            border-radius: 20px;
            border: 1px solid #ffccd5;
            background-color: #fff;
            transition: all 0.3s;
        }

        input:focus {
            border-color: #ff5ca1;
            box-shadow: 0 0 8px rgba(255, 92, 161, 0.4);
        }
        }

        .input-icon {
        color: #ff9eb1;
        width: 20px;
        font-size: 16px;
        }

        .login-code {
        display: flex;
        align-items: center;
        justify-content: space-between;

        img {
            width: 100px;
            height: 40px;
            border-radius: 5px;
            cursor: pointer;
            transition: transform 0.3s;
        }

        img:hover {
            transform: scale(1.05);
        }
        }

        .el-checkbox {
        color: #ff5ca1;
        margin-bottom: 15px;
        }

        .el-button {
        border-radius: 20px;
        background-color: #ff5ca1;
        border: none;
        font-size: 16px;
        transition: all 0.3s;
        margin-top: 10px;

        &:hover {
            background-color: #ff3a94;
            transform: scale(1.03);
        }
        }

        .link-type {
        color: #ff5ca1;
        font-size: 14px;
        }
    }
}

@keyframes floatingHeart {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        transform: translateY(-100px) rotate(20deg);
        opacity: 0.3;
    }
}
</style>